<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>创意精灵</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
	</head>

	<body>
		<div class="warp container">
			<div class="head">
				<div class="head-midell">
					<img src="img/logo.png" class="logo-img" />
					<div class="head-right">
						<div class="head-top">
							<a href="http://www.semyes.cn/">访问官网</a>
							<a href="javasrcript:;">官方微博</a>
							<a href="javasrcript:;">商业服务市场</a>
						</div>
						<div class="head-bottom">
							<span><i class="icon-signal icon-white"></i>400-858-8225</span>
							<span><i class="icon-qrcode icon-white"></i>我的工具</span>
							<span><i class="icon-off icon-white"></i>退出</span>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="content-top">
					<img src="img/advertisement.jpg" />
				</div>
				
				<div class="tabbable"> 
				  <ul class="nav nav-tabs">
				    <li class="active"><a href="#tab1" data-toggle="tab"><i class="icon-th-list"></i> 从账户选择关键词 </a></li>
				    <li><a href="#tab2" data-toggle="tab"><i class="icon-pencil"></i> 输入关键词</a></li>
				  </ul>
				  <div class="tab-content">
				    <div class="tab-pane active" id="tab1">
				    	
				      <div class="innerUl">
				      	
				      	<div class="account">账户：原昇信息</div>
				      </div>
				    </div>
				    <div class="tab-pane" id="tab2">
				      <textarea placeholder="不多于20个关键词，每行一个。" class="input-text"></textarea>
				    </div>
				  </div>
				</div>

			</div>
			
			<div class="bottom">COPYRIGHT (C) 2014-2016 广东原昇信息科技有限公司. ALL RIGHTS RESERVED 备案号：粤ICP备16061139号-2</div>
		</div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/proTree.js"></script>
	<script type="text/javascript">
		//后台传入的 标题列表
		var arr = [{
				id: 1,
				name: "一级标题",
				pid: 0
			}, {
				id: 2,
				name: "二级标题",
				pid: 0
			}, {
				id: 3,
				name: "2.1级标题",
				pid: 2
			}, {
				id: 4,
				name: "2.2级标题",
				pid: 2
			}, {
				id: 5,
				name: "1.1级标题",
				pid: 1
			}, {
				id: 6,
				name: "1.2级标题",
				pid: 1
			}, {
				id: 7,
				name: "1.21级标题",
				pid: 6
			}, {
				id: 8,
				name: "三级标题",
				pid: 0
			}, {
				id: 9,
				name: "1.22级标题",
				pid: 6
			}, {
				id: 10,
				name: "1.221级标题",
				pid: 9
			}, {
				id: 11,
				name: "1.2211级标题",
				pid: 10
			}, {
				id: 12,
				name: "1.2212级标题",
				pid: 10
			},{
				id: 13,
				name: "3.1",
				pid: 8
			},

		];
        //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
		$(".innerUl").ProTree({
			arr: arr,
			simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file
			mouIconOpen: "fa fa-minus-square-o",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
			mouIconClose:"fa fa-plus-square-o",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
			callback: function(id,name) {
				alert("你选择的id是" + id + "，名字是" + name);
			}
		})
	</script>

</html>